<template>
  <div class="login-container">
    <!-- 左侧背景图 -->
    <div class="left-bg">
      <div class="overlay"></div>
    </div>

    <!-- 右侧登录表单 -->
    <div class="right-form">
      <div class="form-wrapper">
        <h1 class="htitle">电子商务课程问答系统</h1>
        
        <el-form
          :model="form" 
          :rules="rules"
          class="register-form"
          v-if="isRegister">
          <el-form-item>
            <h2>用户注册</h2>
          </el-form-item>

          <el-form-item prop="role">
            <el-radio-group v-model="form.role">
            <el-radio-button label="学生">学生</el-radio-button>
            <el-radio-button label="教师">教师</el-radio-button>
            <el-radio-button label="管理员">管理员</el-radio-button>
          </el-radio-group>
          </el-form-item>

          <el-form-item prop="username">
            <el-input
                v-model="form.username"
                placeholder="请输入用户名"
                prefix-icon="User"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
                v-model="form.password"
                type="password"
                placeholder="请输入密码"
                prefix-icon="Lock"
                show-password
            />
          </el-form-item>
          <el-form-item prop="repassword">
            <el-input
                v-model="form.repassword"
                type="password"
                placeholder="请再次输入密码"
                prefix-icon="Lock"
                show-password
            />
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                @click="handleRegister"
                class="register-btn"
            >
              立即注册
            </el-button>
          </el-form-item>
          <el-form-item>
            
            <el-button type="primary" link class="toregister-btn" @click="tologin">去登录</el-button>
          </el-form-item>
        </el-form>
        <el-form 
          :model="form" 
          :rules="rules"
          class="login-form"
          v-else>
          <el-form-item>
            <h2 class="title">用户登录</h2>
          </el-form-item>
          <el-form-item prop="username">
            <el-input
                v-model="form.username"
                placeholder="请输入用户名"
                prefix-icon="User"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
                v-model="form.password"
                type="password"
                placeholder="请输入密码"
                prefix-icon="Lock"
                show-password
            />
          </el-form-item>

          <el-form-item class="action-btns">
            <div class="left-group">
              <el-checkbox v-model="form.remember">记住我</el-checkbox>
            </div>
            <div class="right-group">
              <el-button type="primary" link class="forget-btn">忘记密码</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                @click="handleLogin"
                class="login-btn"
            >
              立即登录
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" link class="toregister-btn" @click="toregister">去注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue'
import { ref } from 'vue'
import { userRegister} from '@/api/user.js'
import { userLogin } from '@/api/user.js'
import { ElMessage } from 'element-plus'
import {useRouter} from "vue-router";

const form = reactive({
  username: '',
  password: '',
  repassword: '',
  role:'学生',
  remember: false
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }

  ]
}

const isRegister = ref(true);
const router = useRouter();

const handleLogin = async() => {
  // 这里处理登录逻辑
  const response = await userLogin(form)
  console.log('登录信息res:', response)
  console.log('登录信息data:', response.data)
  console.log('登录信息data.data:', response.data.data)
  console.log('登录Token信息:', response.status)
  console.log('登录code:', response.code)
  if(response.data.code === 200){
    localStorage.setItem('token',response.data.data.accessToken)
    localStorage.setItem('expireTime',response.data.data.expireTime)
    localStorage.setItem('role',response.data.data.role)
    ElMessage.success('登录成功')
    // window.location.reload(); // 先刷新页面
    router.push('/')
  }else{
    ElMessage.error('登录失败',response.message)
  }
  
}


const handleRegister = async () => {
  // 这里处理登录逻辑

  console.log('注册信息:', form)
  await userRegister(form)
  ElMessage.success('注册成功')
  isRegister.value = false;

}

const toregister = () =>{
  isRegister.value = true;
}

const tologin = () =>{
  isRegister.value = false;
}
//切换的时候，重置表单
watch(isRegister,() =>{
  form.value = {
    username: '',
    password: '',
    repassword: '',
    remember: false
  }
})
</script>

<style scoped>
.login-container {
  display: flex;
  min-height: 100vh;
}

.left-bg {
  flex: 1;
  background: url('@/assets/abc.jpg') center/cover;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.right-form {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
}

.form-wrapper {
  width: 400px;
  padding: 40px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
}

.htitle {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
}
.login-btn {
  width: 100%;
  margin-top: 10px;
}

.login-form {
  margin-top: 30px;
}
.action-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.right-group {
  display: flex;
  gap: 12px;  /* 控制按钮间距 */
  margin-right: -8px; /* 抵消最后一个按钮的padding */
}


.register-btn {
  width: 100%;
  margin-top: 10px;
}



.forget-btn {
  padding: 0 8px !important; /* 控制按钮内边距 */
  height: auto;
  position: relative;
}

.register-btn::after {
  color: #dcdfe6;
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.forget-btn {
  padding-right: 0 !important;
}

</style>